/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import {isParentEdas} from '@/lib';
import {Balloon, Button, ConfigProvider, Dialog, Form, Icon, Select, Upload} from '@alifd/next';

import './index.scss';

const FormItem = Form.Item;

/**
 * @deprecated
 */
@ConfigProvider.config

class ImportDialog extends React.Component {
  static displayName = 'ImportDialog';

  constructor(props) {
    super(props);
    this.formItemLayout = {
      labelCol: {
        fixedSpan: 4,
      },
      wrapperCol: {
        span: 20,
      },
    };
    this.defaultPolicy = 'abort';
    this.state = {
      visible: false,
      serverId: '',
      tenant: '',
      policy: this.defaultPolicy,
      policyLabel: '',
      allPolicy: [],
    };
  }

  componentDidMount() {
    const {locale = {}} = this.props;
    this.setState({
      policyLabel: locale.terminate,
      allPolicy: [
        {value: 'abort', label: locale.terminate},
        {value: 'skip', label: locale.skip},
        {value: 'overwrite', label: locale.overwrite},
      ],
    });
  }

  openDialog(payload, callback) {
    this.callback = callback;
    this.setState({
      visible: true,
      serverId: payload.serverId,
      tenant: payload.tenant,
    });
  }

  closeDialog = () =
> {
  this
.

  setState({
             visible: false,
           });
};

setPolicy = (...value
)
=
>
{
  this.setState({
    policyLabel: value[1].label,
    policy: value[0],
  });
}
;

formatter = res =
>
{
  if (res.code === 200) {
    return {
      code: '0',
      retData: res,
    };
  } else {
    return {
      code: '1',
      error: {
        message: res.message,
      },
      retData: res,
    };
  }
}
;

render()
{
  const {locale = {}} = this.props;
  let uploadLink = `/diamond-ops/batch/import/serverId/${this.state.serverId}/tenant/${
    this.state.tenant.id
    }?policy=${this.state.policy}`;

  if (isParentEdas()) {
    uploadLink = `/authgw/${window.edasprefix}${uploadLink}`;
  }
  const helpTip = (
    < Balloon
  trigger = {
    < span >
    Data
  ID
  {
    ' '
  }
<
  Icon
  type = "help"
  size = "small"
  style = {
  {
    color: '#1DC11D', marginRight
  :
    5, verticalAlign
  :
    'middle'
  }
}
  />
  < /span>
}
  align = "t"
  style = {
  {
    marginRight: 5
  }
}
  triggerType = "hover"
    >
    < a
  href = {window._getLink && window._getLink('knowDataid')}
  target = "_blank" >
    {locale.zipFileFormat}
    < /a>
    < /Balloon>
)
  ;
  const footer = (
    < div >
    < Upload
  listType = {'text'}
  action = {uploadLink}
  limit = {1}
  accept = {'.zip'}
  onSuccess = {(...args
)
  =
>
  {
    this.callback(args[0].retData, this.state.policyLabel);
    this.closeDialog();
  }
}
  onError = {(...args
)
  =
>
  {
    this.callback(args[0].response.retData, this.state.policyLabel);
    this.closeDialog();
  }
}
  formatter = {this.formatter}
  headers = {
  {
    poweredBy: 'simpleMVC', projectName
  :
    'nacos'
  }
}
>
<
  Button
  type = {'primary'} > {locale.uploadFile} < /Button>
    < /Upload>
    < /div>
)
  ;

  return (
    < div >
    < Dialog
  visible = {this.state.visible}
  footer = {footer}
  footerAlign = "center"
  style = {
  {
    width: 480
  }
}
  onCancel = {this.closeDialog}
  onClose = {this.closeDialog}
  title = {`${locale.importLabel + this.state.serverId}）`
}
>
<
  Form >
  < FormItem
  label = {locale.target}
  {...
    this.formItemLayout
  }
>
<
  p >
  < span
  style = {
  {
    color: '#33cde5'
  }
}>
  {
    this.state.tenant.name
  }
<
  /span>
  {
    ` | ${this.state.tenant.id}`
  }
<
  /p>
  < /FormItem>
  < FormItem
  label = {locale.conflict}
  {...
    this.formItemLayout
  }
>
<
  Select
  size = {'medium'}
  hasArrow
  defaultValue = {this.defaultPolicy}
  dataSource = {this.state.allPolicy}
  onChange = {this.setPolicy}
  />
  < /FormItem>
  < /Form>

  < div
  style = {
  {
    textAlign: 'center'
  }
}>
<
  Icon
  type = {'warning'}
  style = {
  {
    color: '#ff8a00', marginRight
  :
    5, verticalAlign
  :
    'middle'
  }
}
  />
  {
    locale.beSureExerciseCaution
  }
  {
    helpTip
  }
<
  /div>
  < /Dialog>
  < /div>
)
  ;
}
}

export default ImportDialog;
